<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="../commons/taglibs.jsp"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML>
<html>
<head>
<%@include file="../commons/meta.jsp"%>

<base href="<%=basePath%>">

<title>会员信息</title>

<script type="text/javascript" src="javascript/jquery-1.11.0.js"></script>
<link rel="stylesheet" href="javascript/v2/css/bootstrap-responsive.css">
<link rel="stylesheet" href="javascript/v2/css/bootstrap.css">
<script src="javascript/v2/js/bootstrap.js"></script>
</head>

<body lang="zh-cn">
				<form class="form-horizontal" name="managerForm" id="managerForm" method="post">
					<input type="hidden" name="member.id" value="${member.id }">
						<table width="380" style="margin:auto;">
						<tr>
						<td height="39" colspan="2"><h3 style="text-align: center;">个人信息</h3></td>
						</tr>
							<tr>
								<th height="37" colspan="2"><span id="managerSuccessSpan"></span>								</th>
							</tr>
							<tr>
								<th width="253" height="50">昵称:</th>
								<td width="409">
									<div id="nickNameDiv">
										<c:choose>
											<c:when
												test="${member.nickName == ''  || member.nickName == null}">
												<input type="text" id="nickName" name="member.nickName"
													style="width: 180px">
												<input type="hidden" name="haveNickName" value="no">
												<span id="nickNameErrSpan"><font color="red"
													style="font-size: 12px;"></font> </span>
											</c:when>
											<c:otherwise>
										${member.nickName }
											<input type="hidden" name="member.nickName"
													value="${member.nickName }">
											</c:otherwise>
										</c:choose>
									</div>
							  </td>
							</tr>
							<tr>
								<th height="47">Tel:</th>
								<td>${member.mobile }</td>
							</tr>
							<tr>
								<th height="47">姓名:</th>
								<td><input type="text" id="name" name="member.name" placeholder="姓名诚可贵，安全更重要"
									style="width:180px;height:30px;font-size:16px" value="${member.name }"></td>
							</tr>
							<tr>
								<th height="47">性别:</th>
								<td><c:choose>
										<c:when
											test="${member.sex == '男' || member.sex == ''  || member.sex == null}">
											<input type="radio" id="sex" name="member.sex" value="男"
												checked="checked">男
											&nbsp;&nbsp;&nbsp;
											<input type="radio" id="sex" name="member.sex" value="女">女
										</c:when>
										<c:otherwise>
											<input type="radio" id="sex" name="member.sex" value="男">男
											&nbsp;&nbsp;&nbsp;
											<input type="radio" id="sex" name="member.sex" value="女"
												checked="checked">女
										</c:otherwise>
									</c:choose></td>
							</tr>
							<tr>
								<th height="47">邮件:</th>
								<td><input type="text" id="email" name="member.email"
									style="width:180px;height:30px;font-size:16px" value="${member.email }"></td>
							</tr>
							
							<tr>
								<td height="56" colspan="2" style="text-align: center;" >
									<button type="button" class="btn btn-primary" id="commitMember">提交</button>
									<a class="btn btn-primary" href="wumimember/memberaction!updateReturnMemberPage?member.eaId=${member.eaId }">返回主页</a>				 
							  </td>
							</tr>
							
							<tr>
							<td height="62" colspan="2" style="text-align: center;">
							<div align="center"><a href="wumimember/memberaction!goToModifyPassword?member.eaId=${member.eaId }&member.id=${member.id }" style="padding-top: 30px;">修改密码</a></div>
							</td>
							</tr>
						</table>
				</form>
	<div style="margin-top: 260px;">
	<c:import url="/jsp/commons/footer.jsp"></c:import>
	</div>
</body>

<script type="text/javascript">
	var loginNameRepeat = false;

	$(document)
			.ready(
					function() {
						$("#nickName")
								.blur(
										function() {
											$("#nickNameErrSpan").html("");
											var nickName = $("#nickName").val();
											if (nickName.length != 0) {
												$
														.ajax({
															cache : true,
															async : false,
															type : "POST",
															url : "wumimember/memberaction!verifyNickName",
															data : $(
																	"#managerForm")
																	.serialize(),
															dataType : "json",
															error : function(
																	request) {
																alert("Connection error");
															},
															success : function(
																	data) {
																var d = eval("("
																		+ data
																		+ ")");
																if (d.verifyFlag == 0) {
																	$(
																			"#nickNameErrSpan")
																			.html(
																					"<font color='red' style='font-size: 12px;'>"
																							+ d.nickNameTips
																							+ "<font/>");
																	loginNameRepeat = true;
																} else {
																	$(
																			"#nickNameErrSpan")
																			.html(
																					"");
																	loginNameRepeat = false;
																}
															}
														});
											}
										});

						$("#commitMember")
								.click(
										function() {
											var email = $('#email').val(); 
											var emailReg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
											if (email.length != 0) {
												if (!emailReg.test(email)) {
													alert("邮箱格式不正确");
													return false;
												}
											}
											if (!loginNameRepeat) {
												$
														.ajax({
															cache : true,
															async : false,
															type : "POST",
															url : "wumimember/memberaction!manager",
															data : $(
																	"#managerForm")
																	.serialize(),
															dataType : "json",
															error : function(
																	request) {
																alert("Connection error");
															},
															success : function(
																	data) {
																var d = eval("("
																		+ data
																		+ ")");
																if (d.haveNickName != null
																		&& d.haveNickName == "yes") {
																	$(
																			"#nickNameDiv")
																			.html(
																					d.memberNickName
																							+ "<input type='hidden' name='member.nickName' value='"+d.memberNickName+"'>");
																}
																var iID=setInterval(alertManagerSuccess, 1000);
																var time = 0;
																function alertManagerSuccess(){
																	if (time < 3) {
																		$(
																		"#managerSuccessSpan")
																		.html(
																				"<font color='red'>"
																						+ d.managerTips
																						+ "<font/>");
																		time++;				
																	}else {
																		$(
																		"#managerSuccessSpan")
																		.html("");
																		clearInterval(iID);
																		time = 0;
																	}
																	
																}
															}
														});
											}
										});

					});
</script>
</html>
